<template>
  <div class="page-container">
    <!-- 顶部导航栏 -->
    <Tabbar :active="activeTab" class="top-tabbar">
      <TabbarItem name="0" @click="select1 = '0'">关注</TabbarItem>
      <TabbarItem name="1" @click="select1 = '1'">发现</TabbarItem>
      <TabbarItem name="2" @click="select1 = '2'">广场</TabbarItem>
      <TabbarItem name="3" @click="select1 = '3'">搜索</TabbarItem>
      <template #right>
        <Icon name="search" @click="handleSearch" />
      </template>
    </Tabbar>

    <!-- 内容区域 -->
    <div v-show="select1 === '0'">关注</div>
    <div v-show="select1 === '1'">
      <Tabs v-model="activeTab">
        <Tab title="全部">
          <Row gutter="20">
            <Col span="12" v-for="(item, index) in tiezi_lst" :key="index">
             <Card
                class="item-card"
                :thumb="item.t_img"
                :title="item.t_title"
                :desc="item.t_content"
                @click="handlePostClick(item.id)"
              >
                <template #footer>
                  <div class="likes">
                    <Icon name="like-o" />
                    <span>{{ item.likes_count }}</span>
                  </div>
                </template>
              </Card>
            </Col>
          </Row>
        </Tab>
        <!-- 动态生成分类标签 -->
        <Tab v-for="tag in tag_lst" :key="tag.id" :title="tag.t_name">
          <Row gutter="20">
            <Col span="12" v-for="item in getPostsByTag(tag.id)" :key="item.id">
              <Card
                class="item-card"
                :thumb="item.t_img"
                :title="item.t_title"
                :desc="item.t_content"
                @click="handlePostClick(item.id)"
              >
                <template #footer>
                  <div class="likes">
                    <Icon name="like-o" />
                    <span>{{ item.likes_count }}</span>
                  </div>
                </template>
              </Card>
            </Col>
          </Row>
        </Tab>
      </Tabs>
    </div>
    <div v-show="select1 === '2'">
      <GuangChang/>
    </div>
    <div v-show="select1 === '3'">
      <BeautyPage/>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from "../../http/index";
import { Tabbar, TabbarItem, Tabs, Tab,  Row, Col, Card,   Icon } from 'vant';
import GuangChang from './GuangChang.vue';
import BeautyPage from './BeautyPage.vue';
const router = useRouter();

// 帖子跳转逻辑
const handlePostClick = (postId) => {
  router.push({
    path: '/post-detail',
    query: { id: postId }
  });
};




// 底部导航选中状态
const select1 = ref('0');
// 顶部标签页与底部导航状态同步
const activeTab = computed({
  get: () => parseInt(select1.value),
  set: (val) => (select1.value = val.toString())
});

// 帖子数据
const tiezi_lst = ref([])
const get_tiezi = () => {  
  http.get('/home/tiezi/').then(res => {  
    tiezi_lst.value = res.data;
  })  
}

// 分类标签数据
const tag_lst = ref([])
const get_tag = () => {
  http.get('/home/tag/').then(res => {
    tag_lst.value = res.data;
  }) 
}

// 根据标签ID过滤帖子
const getPostsByTag = (tagId) => {
  return tiezi_lst.value.filter(item => item.fen_tag === tagId)
}

// 初始化加载数据
onMounted(() => {
  get_tiezi();
  get_tag();
})

// 搜索处理函数
const handleSearch = () => {
  router.push('/search');
};
</script>

<style scoped>
/* 保持原有样式不变 */
.item-card {
  margin-bottom: 20px;
}

.item-card .likes {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.item-card .likes span {
  margin-left: 5px;
}

.page-container {
  background: #f5f5f5;
}

.top-tabbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}
</style>